<template>
  <div>
    <div style="text-align: left; margin-bottom: 10px">
        <el-select v-model="selectedTimeOption"
                   placeholder="选择时间"
                   size="mini"
                   @change="changeStartTime"
                   style="margin-left: 10px">
          <el-option
            v-for="item in timeOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-select v-model="params.dorm"
                   placeholder="选择楼舍"
                   size="mini"
                   :disabled="!params"
                   @change="changeDorm"
                   style="margin-left: 10px">
          <el-option
            v-for="item in dorms"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-input type="text"
                  style="width: 200px; margin: 0px 5px;"
                  placeholder="寝室房间号"
                  size="mini"
                  :disabled="!params || !params.dorm"
                  v-model="params.room" clearable>
        </el-input>
        <el-input type="text"
                  style="width: 200px; margin: 0px 5px;"
                  placeholder="员工姓名"
                  size="mini"
                  v-model="params.workerName" clearable>
        </el-input>
        <el-button size="mini" style="margin: 5px 0 0 5px;" @click="clearSearchParams">
          清空
        </el-button>
        <el-button size="mini" style="margin: 5px 0 0 5px;" type="primary" @click="search">
          查询
        </el-button>
    </div>


    <!--列表-->
    <div style="margin: 0px 10px;text-align: left;">
      <el-table
        :data="taskLogs"
        stripe
        :default-sort="{prop: 'area', order: 'desc'}">

        <el-table-column prop="dorm" label="楼舍" sortable></el-table-column>
        <el-table-column prop="room" label="寝室" sortable></el-table-column>
        <el-table-column prop="timestamp" label="时间" sortable show-overflow-tooltip></el-table-column>
        <el-table-column prop="waterPrice" label="水票价格"></el-table-column>
        <el-table-column prop="bucketNum" label="送出水桶" sortable></el-table-column>
        <el-table-column prop="receiveEmptyBucketNum" label="收回空桶" sortable></el-table-column>
        <el-table-column prop="workerName" label="送水人姓名"></el-table-column>

      </el-table>
      <!--分页组件-->
      <el-row style="float: right">
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          :current-page.sync="params.pageNo"
          :page-sizes="[5, 10, 20, 30, 50, 100]"
          :page-size.sync="params.pageSize"
          layout=" total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>

    </div>
  </div>
</template>

<script>
  import {getDormList, getRoomsOfDorm} from "@/api/modules/app/addressApi";
  import {searchTaskLogs} from "@/api/modules/app/taskLogApi";

  export default {
    name: "taskLogComponent",
    data() {
      return {
        taskLogs: [],
        total: 0,
        timeOptions: ["今天", "最近三天", "本周", "本月", "最近三月", "今年", "全部"],
        selectedTimeOption: "今天",
        areas: ["老区", "二区", "三区", "研究生公寓"], // 常量 数据库里enum
        dorms: [],
        rooms: [],
        // 查询参数
        params: {
          startTime: 0,
          area: null, // 当前选择的楼区 用于查询用
          dorm: null,
          room: null,
          workerName: null,
          pageNo: 1,
          pageSize: 10,
        },
      }
    },
    mounted() {
      this.changeStartTime(this.timeOptions[this.timeOptions.length - 1]);
      this.getAllDormList();
      this.search()
    },
    methods: {
      getAllDormList() {
        let that = this;
        // 所有楼舍
        getDormList().then(result => {
          that.dorms = result.data;
          that.searchParams.dorm = null;
          that.searchParams.room = null;
          that.search();
        })
      },
      // 切换页数
      changePage(pageNo) {
        this.params.pageNo = pageNo;
        this.search()
      },
      // 改变页面大小
      changePageSize(pageSize) {
        this.params.pageSize = pageSize;
        this.search()
      },
      // 获取所有数据
      search() {
        let that = this;
        let params = that.params;
        searchTaskLogs(params.startTime, params.area, params.dorm, params.room, params.workerName,
          params.pageNo, params.pageSize).then(result => {
          that.total = result.data.total;
          that.taskLogs = result.data.records;
        })
      },
      // 选择开始时间
      changeStartTime(timeOption) {
        this.selectedTimeOption = timeOption;
        console.log("开始时间", timeOption);
        let startTime = new Date();
        startTime.setHours(0, 0, 0);
        if (timeOption === '今天') {
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '最近三天') {
          startTime.setDate(startTime.getDate() - 2)
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '本周') {
          startTime.setDate(startTime.getDate() - startTime.getDay() + 1); // 本周
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '本月') {
          startTime.setDate(1); // 本月
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '最近三月') {
          startTime.setMonth(startTime.getMonth() - 2)
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '今年') {
          startTime.setMonth(0)
          startTime.setDate(1);
          this.params.startTime = startTime.getTime();
        } else if (timeOption === '全部') {
          startTime.setTime(0);
          this.params.startTime = startTime.getTime();
        }
        console.log("[选择开始时间]", startTime.toLocaleDateString(), startTime.toTimeString());
        this.search();
      },
      // 切换楼舍
      changeDorm(dorm) {
        // 获取楼区所有寝室
        getRoomsOfDorm(this.params.area, dorm).then(result => {
          this.rooms = result.data;
          this.params.room = null;
          this.search();
        })
      },
      // 清除
      clearSearchParams() {
        this.params.area = null;
        this.params.dorm = null;
        this.params.room = null;
        this.search();
      }
    }
  }
</script>
